<template>
  <KView class="goods-order-item">
    <KView class="goods-order-item-shop clearfix" @click="toShopDetail">
      <KView class="order-item-name">
        <KView class="order-item-name-icon">
          <img class="sys-img" :src="shopIcon" mode="aspectFit">
        </KView>
        <KView class="order-item-name-text ellipsis">{{order.shopName}}</KView>
        <KView class="order-item-name-dropdown">
          <sys-svg name="arrowRight" color="#d4d4d4"></sys-svg>
        </KView>
      </KView>
      <KView class="order-item-status">
        <span :class="`status_${order.status}`">{{i18n.getMsg(`goodsOrder.order.status.${order.status}`)}}</span>
      </KView>
    </KView>
    <KView class="goods-order-item-line"></KView>

    <KView class="goods-order-item-data" v-if="order.goodsList!==null">
      <goods-item v-for="goods in order.goodsList" :key="`goods_${goods.modelId}`" :goods="goods" :order="order" @apply-retreat="applyRetreat"
        @goods-detail="toGoodsDetail" @evaluat-goods="evaluatGoods">
      </goods-item>
    </KView>
    <KView class="goods-order-item-data" v-else>
      <activity-order :order="order" @apply-retreat="applyRetreat"></activity-order>
    </KView>
    <KView class="goods-order-item-line"></KView>

    <KView class="goods-order-item-total" :class="{'has-handle':hasHandle}">
      <KView class="goods-order-item-total-item">
        <KView>
          <span>优惠：</span>
          <span style="color:#ff641f">¥{{order.preferentialPrice}}</span>
        </KView>
        <KView>
          <span>实付：</span>
          <span style="color:#ff641f">¥{{order.totalPrice}}</span>
        </KView>
        <KView>
          <template v-if="order.refusePrice!==0">
            <span>退款：</span>
            <span style="color:#ff641f">¥{{order.refusePrice}}</span>
          </template>
        </KView>
      </KView>
      <KView v-if="order.type==='YYPM'" class="goods-order-item-tip">注：一元拍卖商品实付金额会扣除1元预付款</KView>
    </KView>

    <template v-if="hasHandle">
      <KView class="goods-order-item-line"></KView>
      <KView class="goods-order-item-handle clearfix">
        <KView class="goods-order-item-btns clearfix">
          <template v-if="order.status===0">
            <KView @click="payOrder">去付款</KView>
          </template>
        </KView>
      </KView>
    </template>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';

  import SysSvg from 'common/sysSvg';
  import GoodsItem from './goodsItem';
  import ActivityOrder from './activityOrder';

  export default {
    props: {
      order: {
        type: Object,
        required: true
      }
    },

    computed: {
      hasHandle() {
        let order = this.order;
        return [0].indexOf(order.status) !== -1;
      }
    },

    data() {
      return {
        shopIcon: GlobalData.images.shopCart.shopIcon
      };
    },

    methods: {
      payOrder() {
        this.$emit('pay-order', this.order);
      },

      applyRetreat(goods) {
        this.$emit('apply-retreat', goods, this.order);
      },

      toGoodsDetail(goods) {
        this.$emit('goods-detail', goods,this.order);
      },

      evaluatGoods(goods) {
        this.$emit('evaluat-goods', goods, this.order);
      },

      toShopDetail() {
        this.$emit('shop-detail', this.order);
      }
    },

    components: {
      SysSvg,
      GoodsItem,
      ActivityOrder
    }
  };

</script>

<style lang="scss">
  .goods-order-item {
    padding: formatPx(40) 0;
    box-shadow: 0 formatPx(2) formatPx(10) formatPx(5) rgba(0, 0, 0, .14);
    border-radius: formatPx(8);

    .goods-order-item-line {
      height: 1px;
      background: #DADADA;
    }

    .goods-order-item-shop {
      padding: 0 formatPx(30);
      height: formatPx(40);
      margin-bottom: formatPx(36);

      .order-item-name {
        float: left;
        height: 100%;
        width: calc(100% - #{formatPx(140)});

        >div {
          float: left;
          height: 100%;
        }

        .order-item-name-icon {
          width: formatPx(30);
        }

        .order-item-name-text {
          margin-left: formatPx(10);
          margin-right: formatPx(10);
          max-width: calc(100% - #{formatPx(76)});
          line-height: formatPx(40);
          font-size: formatPx(26);
        }

        .order-item-name-dropdown {
          width: formatPx(26);
        }
      }

      .order-item-status {
        float: right;
        width: formatPx(140);
        height: 100%;
        line-height: formatPx(40);
        text-align: right;
        font-size: formatPx(26);

        .status_-1 {
          color: #999999;
        }

        .status_0 {
          color: #ff641f;
        }

        .status_1 {
          color: #1fb3ff;
        }

        .status_2 {
          color: #ff641f;
        }

        .status_3 {
          color: #333333;
        }

        .status_4 {
          color: #59c254;
        }
      }
    }

    .goods-order-item-data {
      margin-top: formatPx(36);
      padding: 0 formatPx(30);
      margin-bottom: formatPx(36);

      .goods-order-goods-item {
        margin-bottom: formatPx(30);

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .goods-order-item-total {
      margin-top: formatPx(36);
      padding: 0 formatPx(30);

      .goods-order-item-total-item {
        display: flex;

        >div {
          flex: 1;
          font-size: formatPx(26);
        }
      }

      &.has-handle {
        margin-bottom: formatPx(36);
      }

      .goods-order-item-tip {
        color: #ff0000;
        font-size: formatPx(24);
        margin-top: formatPx(10);
      }
    }

    .goods-order-item-handle {
      padding: 0 formatPx(30);
      margin-top: formatPx(36);

      .goods-order-item-btns {
        float: right;

        >div {
          float: left;
          height: formatPx(70);
          line-height: formatPx(70);
          width: formatPx(200);
          font-size: formatPx(28);
          text-align: center;
          border: 1px solid #d8d8d8;
          border-radius: formatPx(35);
          color: #333333;
          margin-right: formatPx(26);

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }

</style>
